<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>中信账单列表</span>
      <div>
        <el-button @click="refresh" icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <div class="container">
      <!-- <el-date-picker v-model="tradeDay" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions" @change="changePicker">
      </el-date-picker> -->
      <el-button type="primary" @click="download()"><i class="el-icon-download" ></i>导出</el-button>
      <div class="tableBox">
        <el-table v-loading="loading" ref="multipleTable" :data="fileList" tooltip-effect="dark" style="width: 100%" stripe :header-cell-style="tableHeaderColor">
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column prop="outTradeNo" align="center" label="日期">
            <template slot-scope="scope">
              <div>{{dateFormat('YYYY-mm-dd',scope.row.settleDate)}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="outTradeNo" align="center" label="订单号">
            <template slot-scope="scope">
              <div>{{scope.row.channelOrderNo}}</div>
              <div>{{scope.row.outTradeNo}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="uniMerchantNo" align="center" label="流水号">
            <template slot-scope="scope">
              <div>{{scope.row.uniMerchantNo}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="balance" align="center" label="实收金额">
            <template slot-scope="scope">
              <div>{{scope.row.channelBalance/100}}</div>
              <div>{{scope.row.balance/100}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="payStatusMsg" align="center" label="订单状态">
            <template slot-scope="scope">
              <div>{{scope.row.channelResultMsg}}</div>
              <div>{{scope.row.payStatusMsg}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="fileName" align="center" label="手续费">
            <template slot-scope="scope">
              <div>{{scope.row.channelFee}}</div>
              <div>{{scope.row.fee}}</div>
            </template>
          </el-table-column>
          <el-table-column prop="diffMsg" align="center" label="差异描述">
            <template slot-scope="scope">
              <div>{{scope.row.diffMsg}}</div>
            </template>
          </el-table-column>
          <!-- <el-table-column fixed="right" align="center" label="操作" width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="download(scope.row.filePath)">下载</el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
      <br>
      <br>
    </div>
  </div>
</template>

<script>
import { exportChayiList, downloadChayiFile } from "@/api/api";
export default {
  name: "item-one",
  data: function () {
    return {
      tradeDay: '',
      fileList: null,
      loading: false,
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      }
    };
  },
  created () {
    const date = new Date();
    this.tradeDay = (date.getTime() - 3600 * 1000 * 24);
    this.merchantlist()
  },
  activated () {
    this.merchantlist()
  },
  methods: {
    changePicker (value) {
      this.merchantlist(this.tradeDay)
      console.log(this.tradeDay)
    },
    //修改thead 背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    // 商户列表
    merchantlist () {
      this.loading = true
      exportChayiList({
      }).then(res => {
        this.loading = false
        if (res.code == 200) {
          if (res.data.rows instanceof Array) {
            this.fileList = res.data.rows
          } else {
            this.fileList = []
          }
        } else {
          this.fileList = []
        }
      });
    },
    dateFormat (fmt, date) {
      let ret;
      date = new Date(date)
      try {
        const opt = {
          "Y+": date.getFullYear().toString(),        // 年
          "m+": (date.getMonth() + 1).toString(),     // 月
          "d+": date.getDate().toString(),            // 日
          "H+": date.getHours().toString(),           // 时
          "M+": date.getMinutes().toString(),         // 分
          "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          };
        };
      } catch (e) {
        return ''
      }
      return fmt;
    },
    download (url) {
      downloadChayiFile().then(res => {
        console.log(res);
        var elementA = document.createElement('a');
        elementA.style.display = 'none'
        elementA.href = res.data //URL.createObjectURL(blob)
        elementA.click()
      })
    },
    refresh () {
      this.merchantlist()
    }
  }
};
</script>
<style scoped lang='less'>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.name {
  width: 25%;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 40%;
  padding: 0 35px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.merchants {
  width: 50%;
}
.tableBox {
  margin-top: 20px;
}
.servicename {
  width: 60%;
}
.servicelevel {
  width: 20%;
}
.width20 {
  width: 20%;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}
.inline-input {
  width: 350px;
}
.width60 {
  width: 50%;
}
</style>